{% extends 'admin/index.html' %}
{% load humanize %}

{% block content_title %}
<h1 class="h1 mt-2 text-muted">Link Stats (id: {{ link.id }}): <i>"{{ link.title }}"</i> {{ link.get_status }}</h1>
<p>
	{{ link.show_urls }}
</p>
{% endblock %}

{% block content %}
<script async>
	// Global Variables
	var DASHBOARD = {
		clicks_over_time: {
			dates: [{% for date, _ in clicks_over_time %}"{{ date }}",{% endfor %}],
			clicks: [{% for _, click in clicks_over_time %}{{ click }},{% endfor %}]
		},
		top_locations: [
			{% for country, clicks in top_all_countries %}['{{ country.name }}', {{ clicks }}],{% endfor %}
		],
		top_devices: [
			{% for device, clicks in top_devices %}['{{ device }}', {{ clicks }}],{% endfor %}
		],
		top_browsers: [
			{% for browser, clicks in top_browsers %}['{{ browser }}', {{ clicks }}],{% endfor %}
		],
		top_os: [
			{% for os, clicks in top_os %}['{{ os }}', {{ clicks }}],{% endfor %}
		],
	}
</script>

<div class="mt-4">

	<div class="row">
		<div class="col-md-12">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fas fa-area-chart"></i> Clicks Over Time</h3>
                </div> <!-- /.box-header -->
                <div class="card-body">
                    <canvas id="clicks-over-time"  height="300"></canvas>
                </div>
            </div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-5">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fas fa-flag"></i> Top Countries</h3>
                </div> <!-- /.box-header -->
                <div class="card-body p-0">
                	<table class="table m-0">
                		<thead>
                			<tr>
                				<th>Flag</th>
                				<th>Country</th>
                				<th>Clicks</th>
                			</tr>
                		</thead>
                		<tbody>
                			{% for country, clicks, percent in top_countries %}
                			<tr>
                				<td><img src="{{ country.flag }}" title="{{ country.name }}"></td>
                				<td>{% if country.name %}{{ country.name }}{% else %}Unknown{% endif %}</td>
                				<td>{{ clicks }} ({{ percent }}%)</td>
                			</tr>
                			{% empty %}
								<tr><td colspan="3" align="center">No data</td></tr>
                			{% endfor %}
                		</tbody>
                	</table>
                </div>
            </div>
		</div>
		<div class="col-md-7">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fas fa-map"></i> Top Locations</h3>
                </div> <!-- /.box-header -->
                <div class="card-body">
                	<div id="top-locations"></div>
                </div>
            </div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fa fa-arrow-up-right-from-square"></i> Referrers</h3>
                </div> <!-- /.box-header -->
                <div class="card-body p-0">
                	<table class="table m-0">
                		<thead>
                			<tr>
                				<th>Referrer</th>
                				<th>Clicks</th>
                			</tr>
                		</thead>
                		<tbody>
                			{% for referer, clicks in referers %}
	                			<tr>
	                				<td>
	                					{% if referer %}
	                						<a href="{{ referer }}" title="{{ referer }}" target="_blank">
	                							{{ referer|truncatechars:80 }}
	                						</a>
	                					{% else %}
	                						<b>Direct, Email, SMS</b>
	                					{% endif %}
	                				</td>
	                				<td>{{ clicks }}</td>
	                			</tr>
	                		{% empty %}
								<tr><td colspan="2" align="center">No data</td></tr>
                			{% endfor %}
                		</tbody>
                	</table>
                </div>
            </div>
		</div>
		<div class="col-md-6">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fa fa-desktop"></i> Top Devices</h3>
                </div> <!-- /.box-header -->
                <div class="card-body">
                	<div id="top-devices" style="min-height: 250px;"></div>
                </div>
            </div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fa fa-pie-chart"></i> Top Operating Systems</h3>
                </div> <!-- /.box-header -->
                <div class="card-body">
                	<div id="top-os" style="min-height: 250px;"></div>
                </div>
            </div>
		</div>

		<div class="col-md-6">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fa fa-pie-chart"></i> Top browsers</h3>
                </div> <!-- /.box-header -->
                <div class="card-body">
                	<div id="top-browsers" style="min-height: 250px;"></div>
                </div>
            </div>
		</div>
	</div>
</div>

{% endblock %}